<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日志简化 App 原型 (带模板选择)</title>
    <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
    <style>
        /* 自定义一些样式 */
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            overflow: hidden; /* 防止整页滚动 */
            height: 100vh; /* 使body占满整个视口高度 */
            display: flex;
            flex-direction: column;
        }
        .preview-panel {
            height: 100%; /* 让预览面板占满容器高度 */
            font-family: 'Courier New', Courier, monospace; /* 等宽字体 */
        }
        .rule-item {
            cursor: grab;
            transition: background-color 0.2s ease-in-out;
        }
        .rule-item:active {
            cursor: grabbing;
            background-color: #e0f2fe; /* sky-100 */
        }
        .placeholder-bg {
            background-image: url('https://source.unsplash.com/random/800x600/?workspace,code,desk'); /* 更新图片主题 */
            background-size: cover;
            background-position: center;
        }
        #main-app {
            display: flex;
            flex-direction: column;
            height: 100vh; /* 占满整个视口高度 */
        }
        
        /* 主内容区域占满除头部和底部外的所有空间 */
        main.app-content {
            flex: 1;
            overflow: hidden; /* 防止主内容溢出 */
            min-height: 0; /* 修复flex子元素最小高度问题 */
        }
        
        /* 左侧规则面板可滚动 */
        aside.rules-sidebar {
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            max-height: 100%;
            min-height: 0; /* 修复flex子元素最小高度问题 */
            width: 300px; /* 固定宽度而不是比例 */
            flex-shrink: 0; /* 防止收缩 */
        }
        
        /* 规则列表区域可滚动且占满剩余空间 */
        #rules-list {
            flex: 1;
            overflow-y: auto;
            min-height: 0; /* 修复flex子元素最小高度问题 */
        }
        
        /* 预览区域可滚动 */
        section.preview-section {
            display: flex;
            flex-direction: column;
            max-height: 100%;
            min-height: 0; /* 修复flex子元素最小高度问题 */
            flex: 1; /* 让预览区域占据更多空间 */
        }
        
        /* 原始日志和处理结果容器占满各自区域 */
        .log-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0; /* 修复flex子元素最小高度问题 */
        }
        
        /* 统一按钮样式 */  
        .btn {
            @apply px-3 py-1.5 rounded text-sm flex items-center space-x-1.5 font-medium transition-colors;
        }
        .btn-primary {
            @apply bg-blue-500 hover:bg-blue-600 text-white;
        }
        .btn-success {
            @apply bg-green-500 hover:bg-green-600 text-white;
        }
        .btn-secondary {
            @apply bg-gray-200 hover:bg-gray-300 text-gray-800;
        }
        .btn-purple {
            @apply bg-purple-100 hover:bg-purple-200 text-purple-800;
        }
        .btn-icon {
            @apply p-1.5 rounded transition-colors;
        }
        .section { display: none; }
        .section.active { display: block; }

        /* 简单的拖拽占位符样式 */
        .dragging-placeholder {
            border: 2px dashed #9ca3af; /* gray-400 */
            background-color: #f3f4f6; /* gray-100 */
            height: 40px; /* 与 rule-item 高度类似 */
            margin-bottom: 0.5rem; /* mb-2 */
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">

    <!-- 主应用界面 -->
    <div id="main-app" class="section active">
        <!-- 顶部导航栏 -->
        <header class="bg-white shadow p-2 flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <div class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                     <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 11-2 0V4h-3v12a3 3 0 11-6 0V4H4zm3 1h2v10H7V5zm4 0h2v10h-2V5z" clip-rule="evenodd" />
                 </svg>
                    <h1 class="text-lg font-semibold">日志简化小助手</h1>
                </div>
                
                <div class="border-l border-gray-300 h-6 mx-1"></div>
                
                <div class="flex items-center space-x-2">
                    <button class="btn btn-primary" id="open-log-btn">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
                     </svg>
                        <span>打开</span>
                 </button>
                    <button class="btn btn-secondary" id="paste-log-btn">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                     </svg>
                        <span>粘贴</span>
                 </button>
                    <button class="btn btn-secondary" id="save-result-btn">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                     </svg>
                        <span>保存</span>
                 </button>
             </div>
            </div>
            
             <div class="flex items-center space-x-2">
                <div class="flex space-x-1">
                    <button class="btn-icon text-gray-500 hover:text-gray-700 hover:bg-gray-100" title="撤销">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M12.066 11.2a4.952 4.952 0 00-5.581 2.156M15 5.372A5.002 5.002 0 0010.001 3c-2.761 0-5 2.239-5 5 0 2.761 2.239 5 5 5 .138 0 .275-.006.41-.018M15 5.372a5 5 0 014.964 6.658" />
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 3v4M15 7h4" />
                     </svg>
                 </button>
                    <button class="btn-icon text-gray-500 hover:text-gray-700 hover:bg-gray-100" title="重做">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M11.934 12.8a4.952 4.952 0 005.581-2.156M9 18.628A5.002 5.002 0 0013.999 21c2.761 0 5-2.239 5-5 0-2.761-2.239-5-5-5-.138 0-.275.006-.41.018M9 18.628a5 5 0 01-4.964-6.658" />
                         <path stroke-linecap="round" stroke-linejoin="round" d="M9 21v-4m0 4H5" />
                     </svg>
                 </button>
                </div>
                <button id="manage-rules-btn" class="btn-icon text-gray-500 hover:text-blue-500 hover:bg-blue-50" title="管理规则" onclick="showSection('rules-management')">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                      <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </button>
                <button class="btn-icon text-gray-500 hover:text-blue-500 hover:bg-blue-50" title="帮助" onclick="showSection('help-section')">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                       <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                     </svg>
                 </button>
             </div>
        </header>

        <!-- 主体内容区 -->
        <main class="app-content flex p-3 space-x-3">
            <!-- 左侧：规则选择区 -->
            <aside class="rules-sidebar bg-white rounded shadow flex flex-col">
                <!-- 规则面板头部 -->
                <div class="p-3 border-b border-gray-200">
                    <div class="flex justify-between items-center mb-3">
                        <h2 class="text-base font-semibold">规则管理</h2>
                        <div class="flex items-center text-xs">
                            <span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full mr-1">已启用: 3</span>
                            <span class="bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">总计: 6</span>
                        </div>
                    </div>
                    
                    <!-- 简化的模板选择器 -->
                    <div class="relative">
                        <select id="editor-template" class="block w-full pl-3 pr-10 py-1.5 text-sm border-gray-300 rounded-md bg-gray-50 focus:border-blue-500 focus:ring-blue-500">
                            <option value="">选择预设模板...</option>
                        <option>通用日志 (默认)</option>
                        <option>VS Code Debug Console</option>
                        <option>Android Logcat</option>
                        <option>Nginx Access Log</option>
                            <option disabled>------</option>
                            <option>我的自定义模板</option>
                    </select>
                        <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none text-gray-500">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </div>
                    </div>
                </div>

                <!-- 规则类别标签 -->
                <div class="flex border-b border-gray-200 bg-gray-50 text-sm">
                    <button class="px-4 py-2 border-b-2 border-blue-500 font-medium text-blue-600">清理规则</button>
                    <button class="px-4 py-2 text-gray-600 hover:text-gray-800">自定义规则</button>
                    <button class="px-4 py-2 text-gray-600 hover:text-gray-800">组合规则</button>
                </div>
                
                <!-- 规则列表容器 -->
                <div class="flex-1 overflow-auto p-2">
                    <div id="rules-list" class="space-y-1.5">
                        <!-- 规则分组：清理规则 -->
                        <div class="rule-item bg-white p-2 rounded border border-gray-200 hover:bg-gray-50 flex items-center justify-between" draggable="true">
                            <label class="flex items-center space-x-2 select-none w-full">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                <div class="flex-1">
                                    <span class="font-medium text-sm">智能去重</span>
                                    <div class="text-xs text-gray-500">移除重复的设备ID记录</div>
                                </div>
                        </label>
                        <span class="text-gray-400 cursor-move">☰</span>
                    </div>
                        
                        <div class="rule-item bg-white p-2 rounded border border-gray-200 hover:bg-gray-50 flex items-center justify-between" draggable="true">
                            <label class="flex items-center space-x-2 select-none w-full">
                                <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600" checked>
                                <div class="flex-1">
                                    <span class="font-medium text-sm">清理时间戳</span>
                                    <div class="text-xs text-gray-500">移除 HH:MM:SS.ms 格式</div>
                                </div>
                        </label>
                         <span class="text-gray-400 cursor-move">☰</span>
                    </div>
                        
                        <div class="rule-item bg-white p-2 rounded border border-gray-200 hover:bg-gray-50 flex items-center justify-between" draggable="true">
                            <label class="flex items-center space-x-2 select-none w-full">
                                <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                <div class="flex-1">
                                    <span class="font-medium text-sm">清理文件路径</span>
                                    <div class="text-xs text-gray-500">移除 "at file.js:123" 格式</div>
                                </div>
                        </label>
                        <span class="text-gray-400 cursor-move">☰</span>
                    </div>
                        
                        <div class="rule-item bg-white p-2 rounded border border-gray-200 hover:bg-gray-50 flex items-center justify-between" draggable="true">
                            <label class="flex items-center space-x-2 select-none w-full">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                <div class="flex-1">
                                    <span class="font-medium text-sm">清理日志头</span>
                                    <div class="text-xs text-gray-500">移除 "[类别]" 格式</div>
                                </div>
                        </label>
                         <span class="text-gray-400 cursor-move">☰</span>
                    </div>
                        
                        <div class="rule-item bg-white p-2 rounded border border-gray-200 hover:bg-gray-50 flex items-center justify-between" draggable="true">
                            <label class="flex items-center space-x-2 select-none w-full">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                <div class="flex-1">
                                    <span class="font-medium text-sm">清理ANSI颜色</span>
                                    <div class="text-xs text-gray-500">移除颜色控制字符</div>
                                </div>
                        </label>
                         <span class="text-gray-400 cursor-move">☰</span>
                    </div>
                        
                        <div class="rule-item bg-white p-2 rounded border border-gray-200 hover:bg-gray-50 flex items-center justify-between" draggable="true">
                            <label class="flex items-center space-x-2 select-none w-full">
                            <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
                                <div class="flex-1">
                                    <span class="font-medium text-sm">保留错误/警告行</span>
                                    <div class="text-xs text-gray-500">只显示包含Error/Warning的行</div>
                                </div>
                        </label>
                         <span class="text-gray-400 cursor-move">☰</span>
                    </div>
                    </div>
                </div>

                <!-- 规则操作按钮 -->
                <div class="p-2 border-t border-gray-200 bg-gray-50 space-y-2">
                    <div class="flex space-x-2">
                        <button id="combine-rules-btn" class="btn btn-primary flex-1 justify-center py-1.5">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                            </svg>
                            <span>组合规则</span>
                        </button>
                        <button id="save-template-btn" class="btn btn-secondary flex-1 justify-center py-1.5">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
                            </svg>
                            <span>保存模板</span>
                        </button>
                    </div>
                    <button class="btn btn-success w-full justify-center py-1.5">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                        </svg>
                        <span>添加自定义规则</span>
                    </button>
                </div>
            </aside>

            <!-- 右侧：预览区 -->
            <section class="preview-section flex-1 flex flex-col h-full">
                <div class="p-2 border-b">
                    <div class="flex justify-between items-center">
                        <h2 class="text-lg font-semibold">日志预览与实时处理</h2>
                        <div class="flex gap-2">
                            <button id="process-btn" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                                应用规则
                            </button>
                            <button id="copy-result-btn" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                                复制结果
                            </button>
                            <button id="clear-logs-btn" class="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300">
                                清空
                            </button>
                </div>
                    </div>
                </div>

                <div class="flex-1 flex flex-col">
                    <!-- 原始日志内容 -->
                    <div id="original-log-container" class="flex-1 overflow-auto p-2" style="flex: 0 0 50%;">
                        <div class="flex-1 h-full flex flex-col">
                            <div class="flex justify-between mb-2">
                                <span class="text-sm font-semibold">原始日志内容</span>
                                <div class="flex items-center">
                                    <button id="create-rule-from-selection-btn" class="mr-2 px-2 py-1 bg-purple-100 hover:bg-purple-200 text-purple-800 rounded text-xs flex items-center" title="先选中日志中的文本，然后点击此按钮创建规则">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                                        <span>从选中内容创建规则</span>
                         </button>
                                    <span class="text-xs bg-gray-100 px-2 py-1 rounded">0 行内容</span>
                    </div>
                            </div>
                            <div class="log-container flex-1 border rounded overflow-auto">
                                <textarea id="original-log-textarea" class="w-full h-full p-3 font-mono text-sm" placeholder="将日志内容粘贴到此处..."></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- 处理结果内容 -->
                    <div id="result-log-container" class="flex-1 overflow-auto p-2" style="flex: 0 0 50%;">
                        <div class="flex-1 h-full flex flex-col">
                            <div class="flex justify-between mb-2">
                                <span class="text-sm font-semibold">处理后的结果</span>
                                <div class="flex space-x-2">
                                    <span class="text-xs bg-green-100 px-2 py-1 rounded">已精简: 0%</span>
                                    <span class="text-xs bg-gray-100 px-2 py-1 rounded">0 行结果</span>
                                </div>
                            </div>
                            <div class="log-container flex-1 border rounded overflow-auto">
                                <textarea id="result-log-textarea" class="w-full h-full p-3 font-mono text-sm" placeholder="处理后的日志将显示在这里..." readonly></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部状态栏 -->
        <footer class="bg-white py-1.5 px-3 text-xs text-gray-600 flex justify-between border-t border-gray-200">
            <div class="flex items-center">
                <span class="bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full text-xs font-medium mr-2">VS Code Debug Console</span>
                <span class="text-gray-500">已应用: 清理时间戳, 清理路径, 智能去重</span>
            </div>
            <div class="flex items-center space-x-2">
                <div class="w-32 h-1.5 bg-gray-200 rounded-full overflow-hidden">
                    <div class="h-full bg-green-500 rounded-full" style="width: 60%"></div>
                </div>
                <span>精简率: 60%</span>
            </div>
        </footer>
    </div>

    <!-- 规则管理界面 (修改为模态) -->
    <div id="rules-management" class="hidden fixed inset-0 z-40 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4"> <!-- 修改: 添加 modal 类, 移除 section, active -->
         <div class="bg-white max-w-2xl w-full rounded shadow-lg relative p-8"> <!-- 修改: 确保内部div样式适合模态 -->
            <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700" onclick="hideSection('rules-management')" title="关闭"> <!-- 修改: onclick -->
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                   <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>
            </button>
            <h2 class="text-2xl font-bold mb-6 text-teal-700">自定义规则与模板管理</h2>

            <!-- 我的规则列表 (现在主要通过主界面添加，这里可以考虑移除或简化) -->
            <div class="mb-6">
                <h3 class="text-lg font-semibold mb-2">我的规则</h3>
                <ul class="space-y-2">
                    <li class="flex justify-between items-center p-2 border rounded hover:bg-gray-50">
                        <span>隐藏IP地址 (正则: \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} → [IP])</span>
                        <div>
                            <button class="text-blue-500 hover:text-blue-700 text-sm mr-2">编辑</button>
                            <button class="text-red-500 hover:text-red-700 text-sm">删除</button>
                        </div>
                    </li>
                    <li class="flex justify-between items-center p-2 border rounded hover:bg-gray-50">
                        <span>隐藏敏感数据 (正则: sensitive_data → [DATA])</span>
                        <div>
                            <button class="text-blue-500 hover:text-blue-700 text-sm mr-2">编辑</button>
                            <button class="text-red-500 hover:text-red-700 text-sm">删除</button>
                        </div>
                    </li>
                </ul>
            </div>

             <!-- 新增/修改：模板管理 -->
            <div class="mb-6 pt-4 border-t">
               <h3 class="text-lg font-semibold mb-2">我的模板</h3>
                <ul class="space-y-2">
                    <li class="flex justify-between items-center p-2 border rounded hover:bg-gray-50">
                        <span>我的快速清理模板 (包含: 去重, 清理时间, 清理路径)</span>
                        <div>
                            <button class="text-blue-500 hover:text-blue-700 text-sm mr-2">编辑</button>
                            <button class="text-red-500 hover:text-red-700 text-sm">删除</button>
                        </div>
                    </li>
                </ul>
                <button class="mt-2 bg-green-100 hover:bg-green-200 text-green-800 px-3 py-1 rounded text-sm">根据当前勾选规则创建新模板</button>
            </div>


            <!-- 创建新规则部分 (已修改) -->
            <div class="pt-4 border-t">
               <h3 class="text-lg font-semibold mb-4">创建/编辑规则</h3> <!-- 标题微调 -->
                <form id="rule-form" class="space-y-4">
                    <div>
                        <label for="rule-name" class="block text-sm font-medium text-gray-700">规则名称</label>
                        <input type="text" id="rule-name" name="rule-name" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如：隐藏邮箱地址">
                    </div>

                    <div>
                        <label for="rule-type-selector" class="block text-sm font-medium text-gray-700">规则类型</label>
                        <select id="rule-type-selector" name="rule-type-selector" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                            <option value="filter_excludes" selected>按行过滤 (移除包含...)</option>
                            <option value="keyword_replace">关键词查找与替换</option>
                            <option value="remove_prefix">移除行首文本</option>
                            <option value="remove_suffix">移除行尾文本</option>
                            <option value="filter_contains">按行过滤 (保留包含...)</option>
                            <option value="regex_replace">正则表达式替换 (高级)</option>
                            </select>
                    </div>

                    <!-- 动态显示的输入字段组 -->
                    <div id="rule-options-container" class="space-y-4">
                       <!-- 关键词替换 -->
                       <div class="rule-option-group" data-rule-type="keyword_replace" style="display: none;">
                    <div>
                                <label for="keyword-find" class="block text-sm font-medium text-gray-700">要查找的关键词</label>
                                <input type="text" id="keyword-find" name="keyword-find" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如：DEBUG" disabled>
                    </div>
                    <div>
                                <label for="keyword-replace" class="block text-sm font-medium text-gray-700">替换为 (留空则为删除)</label>
                                <input type="text" id="keyword-replace" name="keyword-replace" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如：[调试信息]" disabled>
                    </div>
                       </div>
                       <!-- 移除行首 -->
                        <div class="rule-option-group" data-rule-type="remove_prefix" style="display: none;">
                            <div>
                                <label for="prefix-remove" class="block text-sm font-medium text-gray-700">要移除的行首文本</label>
                                <input type="text" id="prefix-remove" name="prefix-remove" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如：INFO: " disabled>
                            </div>
                       </div>
                        <!-- 移除行尾 -->
                       <div class="rule-option-group" data-rule-type="remove_suffix" style="display: none;">
                            <div>
                                <label for="suffix-remove" class="block text-sm font-medium text-gray-700">要移除的行尾文本</label>
                                <input type="text" id="suffix-remove" name="suffix-remove" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如： at ..." disabled>
                            </div>
                       </div>
                        <!-- 按行过滤 (包含) -->
                        <div class="rule-option-group" data-rule-type="filter_contains" style="display: none;">
                            <div>
                                <label for="filter-contains-keyword" class="block text-sm font-medium text-gray-700">保留包含此关键词的行</label>
                                <input type="text" id="filter-contains-keyword" name="filter-contains-keyword" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如：ERROR" disabled>
                            </div>
                        </div>
                        <!-- 按行过滤 (排除) -->
                        <div class="rule-option-group" data-rule-type="filter_excludes" style="display: block;">
                            <div>
                                <label for="filter-excludes-keyword" class="block text-sm font-medium text-gray-700">移除包含此关键词的行</label>
                                <input type="text" id="filter-excludes-keyword" name="filter-excludes-keyword" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如：DEBUG">
                            </div>
                        </div>
                       <!-- 正则表达式替换 -->
                       <div class="rule-option-group" data-rule-type="regex_replace" style="display: none;">
                            <div>
                                <label for="regex-pattern" class="block text-sm font-medium text-gray-700">匹配模式 (正则表达式)</label>
                                <input type="text" id="regex-pattern" name="regex-pattern" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-mono" placeholder="例如：\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}\b" disabled>
                            </div>
                            <div>
                                <label for="regex-replace" class="block text-sm font-medium text-gray-700">替换为 (留空则为删除, 可用 $1, $2 引用分组)</label>
                                <input type="text" id="regex-replace" name="regex-replace" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" placeholder="例如：[Email]" disabled>
                            </div>
                       </div>
                    </div>


                    <div class="flex justify-end space-x-3 pt-4 border-t">
                        <button type="button" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-4 py-2 rounded text-sm" onclick="hideSection('rules-management')">取消</button> <!-- 修改: onclick -->
                        <button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded text-sm">保存规则</button> <!-- Form submission might need review -->
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 帮助/引导界面 (修改为模态) -->
    <div id="help-section" class="hidden fixed inset-0 z-40 flex items-center justify-center bg-gray-900 bg-opacity-75 p-4"> <!-- 修改: 添加 modal 类, 移除 section, active -->
        <div class="bg-white max-w-3xl w-full rounded shadow-lg relative placeholder-bg text-gray-800"> <!-- 修改: 内部div样式 + 背景移到内部? -->
             <div class="absolute inset-0 bg-black bg-opacity-60 rounded -z-10"></div> <!-- Backdrop inside -->
            <div class="relative z-10 p-8">
                <button class="absolute top-4 right-4 text-gray-300 hover:text-white" onclick="hideSection('help-section')" title="关闭"> <!-- 修改: onclick -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
                <h2 class="text-3xl font-bold mb-6 text-white">帮助中心 - 日志简化小助手</h2> <!-- Text color adjustments might be needed -->

                <div class="space-y-4 text-lg text-white">
                    <p>欢迎使用日志简化小助手！🥳 这是一个帮你快速整理和清理日志的小工具。</p>

                    <h3 class="text-xl font-semibold">使用方法</h3>
                    <ol class="list-decimal list-inside ml-4 space-y-2">
                        <li>粘贴或打开日志文件</li>
                        <li>选择预置规则或从选中文本创建自定义规则</li>
                        <li>实时查看处理结果并进行调整</li>
                        <li>复制或保存处理后的结果</li>
                    </ol>

                    <h3 class="text-xl font-semibold">常见问题</h3>
                    <div class="space-y-2">
                        <p><strong>Q: 如何创建自定义规则？</strong><br>A: 选中日志中的一段文本，然后点击"从选中内容创建规则"按钮。</p>
                        <p><strong>Q: 可以保存我的规则集吗？</strong><br>A: 可以！点击"保存模板"按钮，为你的规则集命名后保存。</p>
                        <p><strong>Q: 如何应用已保存的模板？</strong><br>A: 从顶部的模板下拉菜单中选择你保存的模板名称。</p>
                    </div>
                </div>

                <div class="mt-8 text-center">
                     <button class="bg-white text-gray-800 px-4 py-2 rounded hover:bg-gray-200" onclick="hideSection('help-section')">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 规则组合对话框 -->
    <div id="combine-rules-modal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden">
            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-medium">组合规则</h3>
                <button id="close-combine-modal" class="text-gray-400 hover:text-gray-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            
            <form id="combine-rules-form" class="p-4">
                <div>
                    <label for="combined-rule-name" class="block text-sm font-medium text-gray-700 mb-1">规则名称</label>
                    <input type="text" id="combined-rule-name" class="w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" placeholder="例如：清理时间和路径">
                </div>
                
                <div class="mt-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">包含的规则 (<span id="selected-rules-count">0</span>)</label>
                    <div id="rules-to-combine-list" class="bg-gray-50 p-3 rounded border border-gray-200 text-sm max-h-40 overflow-y-auto">
                        <!-- 这里将通过JS动态填充选中的规则 -->
                        <div class="text-gray-400 text-center py-2">未选择任何规则</div>
                    </div>
                </div>
                
                <div class="mt-4 flex items-center justify-start text-sm">
                    <span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full mr-2">提示</span>
                    <span class="text-gray-600">组合规则将按顺序应用所选规则</span>
                </div>
                
                <div class="flex justify-end space-x-3 mt-5 pt-4 border-t border-gray-200">
                    <button type="button" id="cancel-combine-btn" class="btn btn-secondary">取消</button>
                    <button type="submit" class="btn btn-primary">创建组合规则</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 规则选择对话框 -->
    <div id="rule-selector-modal" class="fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 overflow-hidden">
            <div class="p-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-medium">创建规则</h3>
                <button id="close-rule-modal" class="text-gray-400 hover:text-gray-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            
            <div class="p-2 bg-blue-50 border-b border-blue-100 flex items-center">
                <div class="px-2 py-1 text-sm">
                    <span class="text-gray-600">选中文本: </span>
                    <span id="selected-text-preview" class="font-mono text-blue-800 bg-blue-100 px-1.5 py-0.5 rounded"></span>
                </div>
            </div>
            
            <div class="p-4 grid grid-cols-2 gap-3">
                <button class="rule-option-btn bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left transition-colors" data-rule-type="filter_excludes">
                    <div class="flex items-center text-red-600 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
                        </svg>
                        <span class="font-medium">移除包含的行</span>
                    </div>
                    <p class="text-xs text-gray-500">删除包含此文本的所有行</p>
                </button>
                
                <button class="rule-option-btn bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left transition-colors" data-rule-type="filter_includes">
                    <div class="flex items-center text-green-600 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                        </svg>
                        <span class="font-medium">只保留包含的行</span>
                    </div>
                    <p class="text-xs text-gray-500">仅保留包含此文本的行</p>
                </button>
                
                <button class="rule-option-btn bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left transition-colors" data-rule-type="regex_replace">
                    <div class="flex items-center text-blue-600 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
                            <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
                        </svg>
                        <span class="font-medium">替换为空</span>
                    </div>
                    <p class="text-xs text-gray-500">删除所有匹配的文本</p>
                </button>
                
                <button id="timestamp-rule-btn" class="rule-option-btn bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left transition-colors hidden" data-rule-type="remove_timestamps">
                    <div class="flex items-center text-amber-600 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                        </svg>
                        <span class="font-medium">清理时间戳</span>
                    </div>
                    <p class="text-xs text-gray-500">移除所有时间格式</p>
                </button>
                
                <button id="filepath-rule-btn" class="rule-option-btn bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-3 text-left transition-colors hidden" data-rule-type="remove_paths">
                    <div class="flex items-center text-green-600 mb-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
                        </svg>
                        <span class="font-medium">清理路径</span>
                    </div>
                    <p class="text-xs text-gray-500">移除所有文件路径</p>
                </button>
            </div>
            <div class="p-4 bg-gray-50 border-t border-gray-200">
                <button id="advanced-rule-btn" class="w-full py-2 text-sm text-gray-600 hover:text-gray-800" onclick="hideSection('rule-selector-modal'); showSection('rules-management');"> <!-- 修改: onclick -->
                    高级选项...
                </button>
            </div>
        </div>
    </div>

    <script>
        // --- 全局或 DOMContentLoaded 范围内的变量定义 ---
        const mainAppDiv = document.getElementById('main-app');
        const rulesManagementDiv = document.getElementById('rules-management');
        const helpSectionDiv = document.getElementById('help-section');
        const ruleSelectorModal = document.getElementById('rule-selector-modal');
        const combineRulesModal = document.getElementById('combine-rules-modal');
        const rulesListContainer = document.getElementById('rules-list'); 
        let currentSelectedText = ''; 
        // ... 其他全局变量 ...

        // -- Combine Rules related elements (defined once) --
        const combineRulesBtn = document.getElementById('combine-rules-btn');
        const closeCombineModalBtn = document.getElementById('close-combine-modal');
        const cancelCombineBtn = document.getElementById('cancel-combine-btn');
        const combineRulesForm = document.getElementById('combine-rules-form');
        const rulesToCombineList = document.getElementById('rules-to-combine-list');
        // ---------------------------------------------------
        
        // -- 模态/Section 切换逻辑 --
        function hideAllSectionsAndModals() {
            [mainAppDiv, rulesManagementDiv, helpSectionDiv, ruleSelectorModal, combineRulesModal].forEach(el => {
                if (el && !el.classList.contains('hidden')) {
                    el.classList.add('hidden');
                }
            });
        }

        function showSection(sectionId) {
            hideAllSectionsAndModals(); 
            const sectionToShow = document.getElementById(sectionId);
            if (sectionToShow) {
                sectionToShow.classList.remove('hidden');
            } else {
                console.error(`Section with ID ${sectionId} not found.`);
            }
        }

        function hideSection(sectionId) {
             const sectionToHide = document.getElementById(sectionId);
             if (sectionToHide) {
                 sectionToHide.classList.add('hidden');
             }
             if (sectionId === 'rules-management' || sectionId === 'help-section') {
                 if (mainAppDiv && mainAppDiv.classList.contains('hidden')) { 
                     mainAppDiv.classList.remove('hidden');
                 }
             }
        }
        // ------------------------

        // --- Header Button OnClick Attributes need update in HTML---
        // Ensure <button ... title="管理规则" onclick="showSection('rules-management')">
        // Ensure <button ... title="帮助" onclick="showSection('help-section')">

        // ... existing script start ...
        
        // Remove redeclarations of combine-related consts below
        // REMOVE: const combineRulesBtn = ...
        // REMOVE: const combineRulesModal = ...
        // REMOVE: const closeCombineModalBtn = ...
        // REMOVE: const cancelCombineBtn = ...
        // REMOVE: const combineRulesForm = ...
        // REMOVE: const rulesToCombineList = ...

        // --- Combine Rules Logic --- (Function Definitions First)
        function showCombineRulesModal() {
            if (!rulesListContainer || !combineRulesModal || !rulesToCombineList) return;

            const checkedRulesData = [];
            const ruleItems = rulesListContainer.querySelectorAll('.rule-item');
            ruleItems.forEach(item => {
                const checkbox = item.querySelector('input[type="checkbox"]');
                if (checkbox && checkbox.checked) {
                     const ruleData = {
                        name: item.dataset.ruleName || item.querySelector('.rule-text')?.textContent || '',
                        type: item.dataset.ruleType,
                        options: {},
                        enabled: checkbox.checked
                    };
                    // Reconstruct options from data attributes
                     for (const key in item.dataset) {
                        if (key !== 'ruleType' && key !== 'ruleName') {
                            try {
                               ruleData.options[key] = JSON.parse(item.dataset[key]);
                           } catch (e) {
                               ruleData.options[key] = item.dataset[key];
                           }
                       }
                   }
                   checkedRulesData.push(ruleData);
                }
            });

            if (checkedRulesData.length < 2) {
                updateStatusBar('请至少选择两个规则进行组合。', 'error');
                return;
            }

            // Populate the list in the modal
            rulesToCombineList.innerHTML = '';
            checkedRulesData.forEach((rule, index) => {
                const ruleItemDiv = document.createElement('div');
                ruleItemDiv.className = 'py-1 flex items-center';
                ruleItemDiv.innerHTML = `
                    <span class="inline-block w-5 h-5 flex items-center justify-center bg-gray-200 rounded-full text-xs mr-2">${index + 1}</span>
                    <span class="text-sm">${rule.name}</span>
                `;
                rulesToCombineList.appendChild(ruleItemDiv);
            });
            document.getElementById('selected-rules-count').textContent = checkedRulesData.length;


            // Suggest a name
            let defaultName = '组合规则';
            if (checkedRulesData.length > 0) {
                const firstType = checkedRulesData[0].type;
                if (firstType.includes('filter')) defaultName = '组合过滤';
                else if (firstType.includes('replace')) defaultName = '组合替换';
                else if (firstType.includes('remove')) defaultName = '组合清理';
            }
            document.getElementById('combined-rule-name').value = defaultName;

            // Store selected rules data in the modal for submission
            combineRulesModal.dataset.selectedRules = JSON.stringify(checkedRulesData);
            showSection('combine-rules-modal');
        }

        function createCombinedRule(event) {
            event.preventDefault();
            if (!combineRulesModal) return;

            const ruleName = document.getElementById('combined-rule-name').value.trim();
            if (!ruleName) {
                alert('请输入组合规则名称');
                return;
            }

            const selectedRulesJson = combineRulesModal.dataset.selectedRules;
            if (!selectedRulesJson) {
                console.error('No rules selected for combining');
                return;
            }

            try {
                const selectedRules = JSON.parse(selectedRulesJson);
                if (selectedRules.length < 2) return; 

                const combinedRuleOptions = {
                    combinedRules: selectedRules 
                };

                addRuleToList(ruleName, 'combined_rule', combinedRuleOptions, true);

                const originalRuleItems = rulesListContainer?.querySelectorAll('.rule-item');
                const rulesToRemove = [];
                originalRuleItems?.forEach(item => {
                    const checkbox = item.querySelector('input[type="checkbox"]');
                     if (checkbox && checkbox.checked && selectedRules.some(sr => sr.name === item.dataset.ruleName && sr.type === item.dataset.ruleType)) {
                         rulesToRemove.push(item);
                     }
                });
                rulesToRemove.forEach(item => item.remove());


                hideSection('combine-rules-modal');
                updateStatusBar(`组合规则 "${ruleName}" 已创建`, 'success');
                processLogs(); 

            } catch (error) {
                console.error('Error creating combined rule:', error);
                updateStatusBar('创建组合规则失败', 'error');
            }
        }
        // ------------------------


        // --- Initialization --- (Event listeners should be attached here or after definitions)
        document.addEventListener('DOMContentLoaded', function() {
            // ... other initialization ...

            // Event Listeners for Combine Modal (Now defined *after* function definitions)
            if (combineRulesBtn) {
                combineRulesBtn.addEventListener('click', showCombineRulesModal); // This call should now work
            }
            if (closeCombineModalBtn && combineRulesModal) {
                closeCombineModalBtn.addEventListener('click', () => hideSection('combine-rules-modal'));
            }
            if (cancelCombineBtn && combineRulesModal) {
                cancelCombineBtn.addEventListener('click', () => hideSection('combine-rules-modal'));
            }
            if (combineRulesForm) {
                combineRulesForm.addEventListener('submit', createCombinedRule);
            }
            
            // ... rest of DOMContentLoaded ...

            // --- Rule Creation from Selection Logic ---
            // Button to open the rule selector modal
            console.log('Checking if createRuleFromSelectionBtn exists:', createRuleFromSelectionBtn); // DEBUG: Check element
            console.log('Checking if originalLogTextarea exists:', originalLogTextarea); // DEBUG: Check element

            if (createRuleFromSelectionBtn && originalLogTextarea) {
                console.log('Attaching event listener to createRuleFromSelectionBtn...'); // DEBUG
                createRuleFromSelectionBtn.addEventListener('click', () => {
                    console.log('"Create Rule from Selection" button clicked.'); // DEBUG
                    const selectionStart = originalLogTextarea.selectionStart;
                    const selectionEnd = originalLogTextarea.selectionEnd;
                    console.log(`Selection range: ${selectionStart} - ${selectionEnd}`); // DEBUG

                    if (selectionStart !== selectionEnd) { 
                        const selectedText = originalLogTextarea.value.substring(selectionStart, selectionEnd).trim();
                        console.log(`Selected text: "${selectedText}"`); // DEBUG

                        if (selectedText) {
                            currentSelectedText = selectedText;
                            const previewElem = document.getElementById('selected-text-preview');
                            if (previewElem) {
                                 previewElem.textContent = getShortText(currentSelectedText, 50); 
                                 console.log('Updated preview text.'); // DEBUG
                            }

                            // Smart detection for buttons
                            const timestampRuleBtn = document.getElementById('timestamp-rule-btn');
                            const filepathRuleBtn = document.getElementById('filepath-rule-btn');
                            const isTimestamp = /\d{1,2}:\d{2}(:\d{2})?(\.\d{1,3})?/.test(currentSelectedText);
                            const isFilePath = /(at\s+[\w\/.-]+\.(js|vue|html|css|py|java|php|ts|jsx|tsx):\d+)|(\s+at\s+[\w\/.-]+)/.test(currentSelectedText);
                            console.log(`isTimestamp: ${isTimestamp}, isFilePath: ${isFilePath}`); // DEBUG

                            if (timestampRuleBtn) timestampRuleBtn.classList.toggle('hidden', !isTimestamp);
                            if (filepathRuleBtn) filepathRuleBtn.classList.toggle('hidden', !isFilePath);
                            console.log('Toggled smart buttons visibility.'); // DEBUG

                            console.log('Attempting to show rule-selector-modal...'); // DEBUG
                            showSection('rule-selector-modal');
                            console.log('Called showSection for rule-selector-modal.'); // DEBUG
                        } else {
                            console.log('Selected text is empty after trimming.'); // DEBUG
                            updateStatusBar('请先在原始日志中选择一段非空的文本。', 'error');
                        }
                    } else {
                        console.log('No text selected (selectionStart === selectionEnd).'); // DEBUG
                        updateStatusBar('请先在原始日志中选择一段文本。', 'error');
                    }
                });
                console.log('Event listener attached successfully.'); // DEBUG
            } else {
                console.error('Could not find create rule button or original log textarea. Listener not attached.'); // Enhanced error
            }
        });
        // ------------------------
    </script>

</body>
</html>